<!DOCTYPE html>
<html lang="en" class="deeppurple-theme">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover, user-scalable=no">
    <title>{$Think.lang.reset_password}</title>
    <!-- Material design icons CSS -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Roboto fonts CSS -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap" rel="stylesheet">
    <!-- Bootstrap core CSS -->
    <link href="/red/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Swiper CSS -->
    <link href="/red/swiper/swiper-bundle.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="/red/style.css?v=V1.24" rel="stylesheet">
    <link rel="stylesheet" href="/static_new/css/public.css?v=V1.24">
</head>
<body class="">
<div class="wrapper passport">
    <!-- header -->
    <div class="header">
        <div class="row no-gutters">
            <div class="col-2"></div>
            <div class="col-8 text-center">
                <span class="btn small" style="width: 100%;">{$Think.lang.reset_password}</span></div>
            <div class="col-2 text-right">
                <a href="/index/user/lang" class="btn btn-link text-dark">
                    <i class="material-icons" style="display: inline-block">language</i></a>
            </div>
        </div>
    </div>
    <!-- header ends -->
    <div class="container title">
        <div class="row" style="display: none">
            <div class="col mt-4 mb-2">
                <h4>{$Think.lang.reset_password}</h4></div>
        </div>
    </div>
    <div class="container">
        <div class="bg-default">
            <div class="row no-gutters login-row">
                <div class="col align-self-center px-3 text-center mt-3">
                    <img src="{:sysconf('site_icon')}" style="width:100px;height:100px;border-radius: 10px">
                    <p class="mt-2">
                        <b>{:sysconf('site_name')}</b>
                    </p>
                    <form class="form-signin" id="forgetpwd-form">
                        <div class="form-group input-group">
                            <div class="input-group-prepend">
                                <button class="btn dropdown-toggle address" type="button" data-toggle="dropdown"
                                        aria-haspopup="true" aria-expanded="false">+55
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">+55</a>
                                </div>
                            </div>
                            <input type="text" name="tel" placeholder="{$Think.lang.login_phone}" class="form-control"
                                   aria-label="Recipient's username">
                            <div class="input-group-append">
                                <button class="btn btn-link get-code" type="button">{$Think.lang.send_sms}</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <input type="password" name="verify" class="form-control form-control-lg text-center"
                                   placeholder="{$Think.lang.login_q_yzm}" value="" required="" autofocus="">
                        </div>
                        <div class="form-group">
                            <input type="password" name="pwd" class="form-control form-control-lg text-center"
                                   placeholder="{$Think.lang.login_pass}" value="" required="" autofocus="">
                        </div>
                        <div class="form-group">
                            <input type="password" name="pwd_re" class="form-control form-control-lg text-center"
                                   placeholder="{$Think.lang.login_pass2}" value="" required="" autofocus="">
                        </div>
                    </form>
                </div>
            </div>
            <div class="row mx-0 mt-4">
                <div class="col">
                    <a class="btn btn-default btn-lg btn-rounded shadow btn-block form-buttom">{$Think.lang.reset_password}</a>
                </div>
            </div>
            <div class=" mt-4 text-center">
                <a href="/index/user/login" class="">{$Think.lang.login}</a>
            </div>
        </div>
    </div>
</div>
<!-- jquery, popper and bootstrap js -->
<script src="/red/jquery-3.3.1.min.js"></script>
<script src="/red/popper.min.js"></script>
<script src="/red/bootstrap/js/bootstrap.min.js"></script>
<!-- cookie js -->
<script src="/red/jquery.cookie.js"></script>
<script charset="utf-8" src="/static_new/js/dialog.min.js"></script>
<link rel="stylesheet" href="/public/js/layer_mobile/need/layer.css">
<script src="/public/js/layer_mobile/layer.js"></script>
<script charset="utf-8" src="/static_new/js/jquery.progressBarTimer.js"></script>
<script charset="utf-8" src="/static_new/js/common.js"></script>
<!-- template custom js -->
<script src="/red/main.js?v=V1.24"></script>
<script type="application/javascript">
    $(function () {
        var countdown = 60;
        var flag = true;
        var loading = null;

        /*check form*/
        function check() {
            if (!check_phone()) return false;
            if ($("input[name=verify]").val() == '') {
                $(document).dialog({infoText: '{$Think.lang.login_q_yzm}'});
                return false;
            }
            if ($("input[name=pwd]").val() == '' || $("input[name=pwd_re]").val() == '') {
                $(document).dialog({infoText: '{$Think.lang.login_pass}'});
                return false;
            }
            if ($("input[name=pwd]").val() !== $("input[name=pwd_re]").val()) {
                $(document).dialog({infoText: '{$Think.lang.login_passnot}'});
                return false;
            }
            return true;
        }

        /*check phone*/
        function check_phone() {
            if ($("input[name=tel]").val() == '') {
                $(document).dialog({infoText: '{$Think.lang.login_phone}'});
                return false;
            }
            return true;
        }

        /*code time*/
        function time_down(obj) {
            if (countdown == 0) {
                flag = true;
                obj.text("Enviar");
                countdown = 60;
                return;
            } else {
                flag = false;
                obj.text(countdown + "s");
                countdown--;
            }
            setTimeout(function () {
                time_down(obj)
            }, 1000);
        }

        /*get code*/
        $(".get-code").on('click', function () {
            if (check_phone() && flag) {
                $.ajax({
                    url: '/index/send/sendsms',
                    data: {'tel': $("input[name=tel]").val(), 'type': 2},
                    type: 'POST',
                    success: function (data) {
                        if (data.code == 0) {
                            $(document).dialog({infoText: data.info});
                            time_down($(".get-code"));
                        } else {
                            $(document).dialog({infoText: data.msg});
                        }
                    }
                });
            }
        })

        /*submit*/
        $(".form-buttom").on('click', function () {
            if (check()) {
                $.ajax({
                    url: "{:url('do_forget')}",
                    data: $("#forgetpwd-form").serialize(),
                    type: 'POST',
                    beforeSend: function () {
                        loading = $(document).dialog({
                            type: 'notice',
                            infoIcon: '/static_new/img/loading.gif',
                            infoText: '{$Think.lang.bank_loding}',
                            autoClose: 0
                        });
                    },
                    success: function (data) {
                        if (data.code == 0) {
                            $(document).dialog({infoText: '{$Think.lang.czcg}'});
                            setTimeout(function () {
                                location.href = "{:url('user/login')}"
                            }, 1500);
                        } else {
                            loading.close();
                            $(document).dialog({infoText: data.info});
                        }
                    }
                });
            }
            return false;
        })
    })
</script>
</body>
</html>